<template>
    <div>
        <el-page-header v-if="hasBackBtn" @back="goBack" class="page-header">
            <div slot="content" class="page-header-content">
                {{pageTitle}}
            </div>
        </el-page-header>
        <h1 v-else class="page-header-else-content">{{pageTitle}}</h1>
    </div>
</template>
<script>
    export default {
        name: 'PageHeader',
        props: {
            pageTitle: String,
            hasBackBtn: {
                type: Boolean,
                default: true
            }
        },
        data() {
            return {}
        },
        methods: {
            goBack() {
                this.$router.back();
            }
        }
    }
</script>
<style lang="scss" scoped>
    .page-header {
        margin: 0.1rem 0.2rem;

        .page-header-content {
            font-size: 0.16rem;
        }
    }
    .page-header-else-content{
        margin: 0.1rem 0.2rem;
        text-align: left;
        font-size: 0.16rem;
        font-weight: 400;
    }
</style>
